<script>
  export default { name: 'TaskDetail' }
</script>
<script setup>
  import { onLoad } from '@dcloudio/uni-app'
  import { ToskDetail } from '@/apis/task.js'
  import { ref } from 'vue'

  const taskDetail = ref({})
  // 获取地址参数
  onLoad(async (params) => {
    const res = await ToskDetail(params.id)
    console.log(res)
    taskDetail.value = res.data
    console.log(taskDetail.value)
  })
</script>

<template>
  <view class="page-container">
    <view class="search-bar">
      <!-- #ifdef  APP-PLUS || MP -->
      <text class="iconfont icon-scan"></text>
      <!-- #endif -->
      <!-- #ifdef H5 -->
      <text class="iconfont icon-search"></text>
      <!-- #endif -->
      <!-- <text class="iconfont" :class="$platform === 'h5' ? 'icon-search' : 'icon-scan'"></text> -->
      <input class="input" type="text" placeholder="输入运单号" />
    </view>
    <scroll-view scroll-y class="task-detail">
      <view class="scroll-view-wrapper">
        <view class="basic-info panel">
          <view class="panel-title">基本信息</view>
          <view class="timeline">
            <view class="line">{{ taskDetail.startAddress }}</view>
            <view class="line">{{ taskDetail.endAddress }}</view>
            <navigator hover-class="none" url="/subpkg_task/guide/index" class="guide">
              <text class="iconfont icon-guide"></text>
              <text>开始导航</text>
            </navigator>
          </view>
          <view class="info-list">
            <view class="info-list-item">
              <text class="label">任务编号</text>
              <text class="value">{{ taskDetail.transportTaskId }}</text>
            </view>
            <view class="info-list-item">
              <text class="label">提货联系人</text>
              <text class="value">{{ taskDetail.startHandoverName }}</text>
            </view>
            <view class="info-list-item">
              <text class="label">联系电话</text>
              <text class="value">{{ taskDetail.startHandoverPhone }}</text>
            </view>
            <view class="info-list-item">
              <text class="label">预计提货时间</text>
              <text class="value">{{ taskDetail.planDepartureTime }}</text>
            </view>
            <view class="info-list-item">
              <text class="label">实际提货时间</text>
              <text class="value">{{ taskDetail.actualDepartureTime }}</text>
            </view>

            <view class="hr"></view>

            <view class="info-list-item">
              <text class="label">交付联系人</text>
              <text class="value">{{ taskDetail.finishHandoverName }}</text>
            </view>
            <view class="info-list-item">
              <text class="label">联系电话</text>
              <text class="value">{{ taskDetail.finishHandoverPhone }}</text>
            </view>
            <view class="info-list-item">
              <text class="label">预计送达时间</text>
              <text class="value">{{ taskDetail.planArrivalTime }}</text>
            </view>
            <view class="info-list-item">
              <text class="label">实际送达时间</text>
              <text class="value">{{ taskDetail.actualArrivalTime }}</text>
            </view>
          </view>
        </view>

        <view class="except-info panel">
          <view class="panel-title">异常信息</view>
          <view class="info-list">
            <view class="info-list-item">
              <text class="label">上报时间</text>
              <text class="value">2022.05.04 13:00</text>
            </view>
            <view class="info-list-item">
              <text class="label">异常类型</text>
              <text class="value">有异常响动</text>
            </view>
            <view class="info-list-item">
              <text class="label">处理结果</text>
              <text class="value">继续运输</text>
            </view>
          </view>
          <view class="info-list">
            <view class="info-list-item">
              <text class="label">上报时间</text>
              <text class="value">2022.05.04 13:00</text>
            </view>
            <view class="info-list-item">
              <text class="label">异常类型</text>
              <text class="value">有异常响动</text>
            </view>
            <view class="info-list-item">
              <text class="label">处理结果</text>
              <text class="value">继续运输</text>
            </view>
          </view>
        </view>

        <view class="panel pickup-info">
          <view class="panel-title">提货信息</view>
          <view class="label">提货凭证</view>
          <view class="pictures">
            <image
              v-for="receipt of taskDetail.cargoPictureList"
              :key="receipt.url"
              class="picture"
              :src="receipt.url"
            />
            <view v-if="!taskDetail.cargoPictureList" class="picture-blank">暂无图片</view>
          </view>
          <view class="label">货品照片</view>
          <view class="pictures">
            <image
              v-for="goods in taskDetail.cargoPickUpPictureList"
              :key="goods.url"
              class="picture"
              :src="goods.url"
            />
            <view v-if="!taskDetail.cargoPickUpPictureList" class="picture-blank">暂无图片</view>
          </view>
        </view>

        <view class="delivery-info panel">
          <view class="panel-title">交货信息</view>
          <view class="label">交货凭证</view>
          <view class="pictures">
            <image
              v-for="v of taskDetail.certificatePictureList"
              :key="v.url"
              class="picture"
              :src="v.url"
            />
            <view v-if="!taskDetail.cargoPickUpPictureList" class="picture-blank">暂无图片</view>
          </view>
          <view class="label">货品照片</view>
          <view class="pictures">
            <image
              v-for="v of taskDetail.deliverPictureList"
              :key="v.url"
              class="picture"
              :src="v.url"
            />
            <view v-if="!taskDetail.deliverPictureList" class="picture-blank">暂无图片</view>
          </view>
        </view>
      </view>
    </scroll-view>

    <view class="toolbar" v-if="taskDetail.status === 2">
      <navigator
        :url="`/subpkg_task/delay/index?id=${taskDetail.id}&planDepartureTime=${taskDetail.planDepartureTime}`"
        hover-class="none"
        class="button secondary"
        >延迟提货</navigator
      >s
      <navigator
        :url="`/subpkg_task/pickup/index?id=${taskDetail.id}`"
        hover-class="none"
        class="button primary"
        >提货</navigator
      >
    </view>
    <view class="toolbar" v-if="taskDetail.status === 1">
      <navigator
        :url="`/subpkg_task/except/index?id=${taskDetail.driverId}`"
        hover-class="none"
        class="button secondary"
        >异常上报
      </navigator>
      <navigator
        :url="`/subpkg_task/delivery/index?id=${taskDetail.driverId}`"
        hover-class="none"
        class="button primary"
        >交付</navigator
      >
    </view>
    <view class="toolbar">
      <navigator url="/subpkg_task/record/index" hover-class="none" class="button primary block"
        >回车登记</navigator
      >
    </view>
  </view>
</template>

<style lang="scss" scoped>
  @import './index.scss';
</style>
